<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>
        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">字体</h1>
            <p class="font-sans">Tailwind is awesome</p>
            <p class="font-serif">Tailwind is awesome</p>
            <p class="font-mono">Tailwind is awesome</p>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">字体大小</h1>
            <p class="text-xs">Tailwind is awesome</p>
            <p class="text-sm">Tailwind is awesome</p>
            <p class="text-base">Tailwind is awesome</p>
            <p class="text-lg">Tailwind is awesome</p>
            <p class="text-xl">Tailwind is awesome</p>
            <p class="text-2xl">Tailwind is awesome</p>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">字体权重</h1>
            <p class="font-light">Tailwind is awesome</p>
            <p class="font-normal">Tailwind is awesome</p>
            <p class="font-medium">Tailwind is awesome</p>
            <p class="font-semibold">Tailwind is awesome</p>
            <p class="font-bold">Tailwind is awesome</p>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">字体间距</h1>
            <p class="tracking-tight">Tailwind is awesome</p>
            <p class="tracking-normal">Tailwind is awesome</p>
            <p class="tracking-wide">Tailwind is awesome</p>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">对齐方式</h1>
            <p class="text-left">Tailwind is awesome</p>
            <p class="text-center">Tailwind is awesome</p>
            <p class="text-right">Tailwind is awesome</p>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">下划线</h1>
            <p class="underline decoration-4">Tailwind is awesome</p>
            <p class="line-through">Tailwind is awesome</p>
            <p class="overline">Tailwind is awesome</p>
            <p class="no-underline">Tailwind is awesome</p>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">下划线样式</h1>
            <p class="underline decoration-solid">Tailwind is awesome</p>
            <p class="underline decoration-double">Tailwind is awesome</p>
            <p class="underline decoration-dotted">Tailwind is awesome</p>
            <p class="underline decoration-dashed">Tailwind is awesome</p>
            <p class="underline decoration-wavy">Tailwind is awesome</p>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">下划线偏移量</h1>
            <p class="underline underline-offset-1">Tailwind is awesome</p>
            <p class="underline underline-offset-2">Tailwind is awesome</p>
            <p class="underline underline-offset-4">Tailwind is awesome</p>
            <p class="underline underline-offset-8">Tailwind is awesome</p>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">字体大小写</h1>
            <p class="uppercase">Tailwind is awesome</p>
            <p class="lowercase">Tailwind is awesome</p>
            <p class="capitalize">Tailwind is awesome</p>
        </section>
    </body>
</html>
